<template>
  <div class="chusheDetail">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审批</el-breadcrumb-item>
      <el-breadcrumb-item>试点项目申报预审</el-breadcrumb-item>
      <el-breadcrumb-item>查看</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="head">
      <h3 class="title">{{info.projectName}}</h3>
      <ul class="tag">
        <li>
          <span>规划编号：</span>
          <i>{{info.projectNo}}</i>
        </li>
        <li>
          <span>提交人：</span>
          <i>{{creator.creatorName}}</i>
        </li>
        <li>
          <span>提交时间：</span>
          <i>{{creator.createTime}}</i>
        </li>
      </ul>
    </div>
    <div class="basicInfo">
      <h3 class="title">
        <i></i>
        基本信息
      </h3>
      <el-row>
        <el-col :span="12">
          <label>项目编码</label>
          <span>{{info.uniqueCityCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目类型</label>
          <span>{{getProjectName(info.projectCategoryName)}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目概算</label>
          <span>{{info.projectBudget}}</span>
        </el-col>
        <el-col :span="12">
          <label>资金来源</label>
          <span>{{info.capitalSource}}</span>
        </el-col>
        <el-col :span="12">
          <label>计划开始时间</label>
          <span>{{info.planBeginTime}}</span>
        </el-col>
        <el-col :span="12">
          <label>计划结束时间</label>
          <span>{{info.planEndTime}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目联系人</label>
          <span>{{info.projectContact}}</span>
        </el-col>
        <el-col :span="12">
          <label>项目联系人电话</label>
          <span>{{info.projectContactMobile}}</span>
        </el-col>
        <el-col :span="24">
          <label class="other">附件</label>
          <!-- <span>软件工程</span> -->
        </el-col>
        <el-col :span="24">
          <label class="other">建设内容</label>
          <span>{{info.remark}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="basicInfo">
      <h3 class="title">
        <i></i>
        试点项目预审意见
      </h3>
      <el-row>
        <el-col :span="12">
          <label>预审时间</label>
          <span>{{info.uniqueCityCode}}</span>
        </el-col>
        <el-col :span="12">
          <label>预审人</label>
          <span>{{getProjectName(info.projectCategoryName)}}</span>
        </el-col>
        <el-col :span="12">
          <label>预审结果</label>
          <span>{{info.projectBudget}}</span>
        </el-col>
        <el-col :span="12">
          <label>上传附件</label>
          <span>{{info.planEndTime}}</span>
        </el-col>
        <el-col :span="24">
          <label class="other">上传附件</label>
          <!-- <span>软件工程</span> -->
        </el-col>
        <el-col :span="24">
          <label class="other">预审意见</label>
          <span>{{info.remark}}</span>
        </el-col>
      </el-row>
    </div>
    <Tab />
  </div>
</template>

<script>
/* eslint-disable */
import Tab from '../.../../../../../components/Tab'
export default {
    data() {
        return {
            info: {},
            creator: {},
            workflow: null,
            activities: [
                {
                    content: "试点项目预审",
                    timestamp: "2018-04-12 20:46",
                    size: "large",
                    type: "primary",
                    icon: "el-icon-more",
                    name: '李四'
                }
            ]
        };
    },
    components: {
        Tab
    },
    computed: {
        id() {
            return this.$route.query.id;
        },
        pid() {
            return this.$route.query.pid;
        }
    },
    mounted() {
        this.getDetail();
        this.getCreator();
    },
    methods: {
        getDetail() {
            this.axios
                .get("/projectProcess/getOne", { params: { id: this.id } })
                .then(res => {
                    this.info = res.data;
                });
        },
        getProjectName(_state) {
            let state = Number(_state);
            let stateStr = "";
            if (state === 1) {
                stateStr = "全市发展规划";
            } else if (state === 2) {
                stateStr = "专项发展规划";
            } else if (state === 3) {
                stateStr = "软件开发";
            } else if (state === 4) {
                stateStr = "系统集成";
            } else if (state === 5) {
                stateStr = "民政局";
            } else if (state === 6) {
                stateStr = "公安局";
            } else if (state === 7) {
                stateStr = "财政局";
            } else if (state === 8) {
                stateStr = "国税局";
            } else if (state === 9) {
                stateStr = "土地局";
            }
            return stateStr;
        },
        getCreator() {
            this.axios
                .get("/projectProcess/getOne/log", {
                    params: {
                        processId: this.id,
                        actionType: 1
                    }
                })
                .then(res => {
                    if (res.code !== 1000) {
                        this.$message.error(res.message);
                    }
                    this.creator = res.data;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.chusheDetail {
  .head {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    .title {
      font-size: 24px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
    }
    .tag {
      display: flex;
      color: #999;
      margin-top: 10px;
      i {
        font-style: initial;
        color: #333;
      }
      li {
        margin-right: 40px;
      }
    }
  }

  .basicInfo {
    padding: 20px;
    background-color: #fff;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      i {
        width: 4px;
        height: 16px;
        display: inline-block;
        background-color: #4967cf;
        margin-right: 6px;
      }
    }
    .el-row {
      border: 1px solid rgba(238, 238, 238, 1);
      border-bottom: none;
      .el-col {
        border-bottom: 1px solid rgba(238, 238, 238, 1);
      }
    }

    label {
      height: 40px;
      line-height: 40px;
      display: inline-block;
      width: 150px;
      background-color: #fafafa;
      text-align: right;
      padding-right: 14px;
      color: #999999;
    }
    .other {
      height: 80px;
    }
    span {
      height: 40px;
      padding-left: 15px;
      color: #333;
    }
  }

  .tabs {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
  }
}
</style>
